<template>
    <div id="">
        <el-card style="margin:20px 0px">
            <CategorySelect @getCategoryId="getCategoryId" :show="scene!=0"/>
        </el-card>
        <el-card>
            <!-- 这里将来有三部分进行切换 -->
             <div v-show="scene==0">
                <!-- 展示spu列表的结构 -->
                <el-button type="primary" icon="el-icon-plus" :disabled="!category3Id" @click="addSpu">添加spu</el-button>
                <el-table style="width:100%" border :data="records">
                    <el-table-column type="index" label="序号" width="80" align="center">
                    </el-table-column>
                    <el-table-column prop="spuName" label="spu名称" width="width">
                    </el-table-column>
                    <el-table-column prop="description" label="spu描述" width="width">
                    </el-table-column>
                    <el-table-column prop="prop" label="操作" width="width">
                        <template slot-scope="{row,$index}">
                            <!-- 这里按钮将来hintbutton来替换 -->
                            <el-button type="success" icon="el-icon-plus" size="mini" title="添加sku" @click="addSku(row)"></el-button>
                            <el-button type="warning" icon="el-icon-edit" size="mini" title="修改spu" @click="updateSpu(row)" ></el-button>
                            <el-button type="info" icon="el-icon-info" size="mini" title="查看当前spu所有列表" @click="handler(row)"></el-button>
                            <!-- 气泡确认框    onConfirm为点击正确按钮的事件 注意elm ui的版本 这个是2.13                 -->
                            <el-popconfirm title="确定删除这条SPU吗" @onConfirm="deleteSpu(row)">
                               <el-button type="danger" icon="el-icon-delete" size="mini" title="删除spu"  slot="reference"></el-button>
                            </el-popconfirm>
                            
                        </template>
                    </el-table-column>
                </el-table>
                <el-pagination
                    @current-change="handleCurrentChange"
                    @size-change="handleSizeChange"
                    style="text-align:center"
                    :current-page="page"
                    :page-sizes="[3,5,10]"
                    :page-size="limit"
                     layout="prev, pager, next,jumper,->, sizes, total"
                    :total="total">
                </el-pagination>
             </div>
             <SpuForm v-show="scene==1" @changeScene="changeScene" ref="spu"/>
             <SkuForm v-show="scene==2" @changeScenes="changeScenes" ref="sku"/>
        </el-card>
        <!-- 获取sku信息 -->
        <el-dialog :title="`${spu.spuName}的sku列表`" :visible.sync="dialogTableVisible" :before-close="close">
            <el-table :data="skuList" border v-loading="loading">
                <el-table-column prop="skuName" label="名称" width="150"></el-table-column>
                <el-table-column prop="price" label="价格" width="200"></el-table-column>
                <el-table-column prop="weight" label="重量"></el-table-column>
                <el-table-column  label="默认图片">
                    <template slot-scope="{row,$index}">
                          <img :src="row.skuDefaultImg" style="width:100px;heigth:100px">
                    </template>
                </el-table-column>
            </el-table>
        </el-dialog>
    </div>
</template>

<script >
//引入子组件（先引入再注册）
import SpuForm from './SpuForm'
import SkuForm from './SkuForm'
import { Loading } from 'element-ui'
export default {
    name: "Spu",
    data() {
        return {
            //分类的id
            category1Id:'',
            category2Id:'',
            category3Id:'',
            //控制三级联动的可操作性
            page:1,  //分页器当前第一页
            limit:3,  //每一页多少数据 
            records:[],  //spu列表的数据
            total:0,  //分页器一共需要展示数据的条数
            scene:0,  //0代表展示spu数据  1代表添加修改spu  2代表添加sku
            //控制对话框的隐藏和显示
            dialogTableVisible:false,
            spu:{},
            skuList:[],//存储的是sku的列表的数据
            loading:true
        }
    },
    //注册子组件
    components: {SpuForm,SkuForm},
    methods: {
        //三级联动的自定义事件，可以把子组件的id传给父组件
        getCategoryId({categoryId,level}){
            //categoryId：可以获取到一二三级分类的id  level：为了区分是几级id
            if(level==1){
                this.category1Id = categoryId
                //清除23级分类的id
                this.category2Id = ""
                this.category3Id = ""
            }else if(level==2){
                this.category2Id = categoryId
                //清除三级id
                this.category3Id = ""
            }else{
                this.category3Id = categoryId
                //获取SPU列表数据
                this.getSpuList()
            }
        },
        //获取spu列表数据的方法
        async getSpuList(){
            const {page,limit,category3Id} = this
            //携带三个参数：page 第几页 limit 每一页需要展示多少条数据  三级分类id
            let result = await this.$API.spu.reqSpuList(page,limit,category3Id)
            // console.log(result)
            if(result.code ==200){
                this.total = result.data.total
                this.records = result.data.records
            }
        },
        //点击分页器的第几页按钮的回调
        handleCurrentChange(page){
           this.page = page
           //再次获取列表数据
           this.getSpuList()
        },
        //分页器每一页数据条数改变
        handleSizeChange(limit){
            this.limit = limit
            this.getSpuList()
        },
        //添加spu按钮的回调
        addSpu(){
            //切换场景为1
            this.scene=1
            //通知spuform发请求--两个请求
            this.$refs.spu.addSpuData(this.category3Id)

        },
        //修改某一个spu
        updateSpu(row) {
            this.scene=1
            //获取子组件spuform子组件的
            this.$refs.spu.initSpuData(row)
        },
        //自定义事件回调(spuform)
        changeScene({scene,flag}){
            //flag这个形参是区分保存按钮是添加还是修改 
            this.scene=scene
            //修改或添加spu属性过后，再次发送请求更新页面,并停留在当前页
            //修改的保存点击后返回到当前页，添加的保存点击后返回第一页
            if(flag=="修改"){
                this.getSpuList(this.page)
            }else{
                this.getSpuList()
            }

        },
        //删除spu按钮的回调
        async deleteSpu(row){
            let result = await this.$API.spu.reqDeleteSpu(row.id)
            if(result.code==200){
                this.$message({type:'success',message:'删除成功'})
                //代表spu个数大于1删除的时候停留在当前页，如果spu个数小于1 回到上一页
                this.getSpuList(this.records.length>1?this.page:this.page-1)
            }
        },
        //添加sku的回调
        addSku(row){
            //切换场景为2
            this.scene=2
            //父组件调用子组件的方法，让子组件发请求
            this.$refs.sku.getData(this.category1Id,this.category2Id,row)

        },
        //skuform通知父组件修改场景
        changeScenes(scene){
             this.scene=scene
        },
        //查看sku列表的回调
        async handler(spu){
             //点击按钮时对话框可见
             this.dialogTableVisible=true
             //保存spu的信息
             this.spu=spu
             //获取sku列表的数据进行展示
             let result = await this.$API.spu.reqSkuList(spu.id)
             //console.log(result)
             this.skuList = result.data
             //loading隐藏
             this.loading=false
        },
        //关闭对话框的回调
        close(done){
            //loading属性再次变为真
            this.loading=true
            //清除sku列表的数据
            this.skuList=[]
            done()
            
        }
    },


}
</script>

<style >

</style>
